<template>
  <div>
    <div v-if="commentList.length">
      <div
        class="flex pb-2 mb-2 border-b-zinc-200 border-b"
        v-for="item in commentList"
        :key="item.id"
      >
        <img
          :src="item.user.avatarUrl"
          class="w-4 h-4 rounded-[9999px] object-cover mr-2"
          alt=""
        />
        <div class="w-full">
          <div class="flex items-center w-full justify-between">
            <div class="flex items-center">
              <div class="text-base text-zinc-800 font-bold">
                {{ item.user.nickName }}
              </div>
              <div
                class="w-0.5 h-0.5 rounded-[100%] bg-slate-400 ml-0.5 mr-0.5"
              ></div>
              <div class="text-sm text-zinc-500">
                {{ item.user.occupation }}
              </div>
              <x-svg-icon
                v-if="item.user.vip"
                class="w-2 h-2 ml-0.5"
                name="vip1"
              ></x-svg-icon>
            </div>
            <div class="text-sm text-zinc-400">
              {{ moment(item.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
          <div
            v-html="item.content"
            class="text-base text-zinc-500 mt-1 mb-1 w-full"
          ></div>
          <div class="flex items-center">
            <!-- TODO -->
            <div
              class="
                flex
                items-center
                mr-2
                cursor-pointer
                hover:text-blue-500
                text-zinc-400
              "
            >
              <van-icon name="like-o" />
              <span class="text-sm ml-0.5"> 点赞(TODO) </span>
            </div>
            <div
              class="
                flex
                items-center
                cursor-pointer
                hover:text-blue-500
                text-zinc-400
              "
              @click="handleReply1(item)"
            >
              <van-icon name="chat-o" />
              <span class="text-sm ml-0.5">
                {{ item.isShowInput ? "取消回复" : "回复" }}
              </span>
            </div>
          </div>
          <div v-if="item.isShowInput">
            <CommentInput
              :ref="setRef"
              class="mt-1"
              :replyid="item.id"
              :pid="item.id"
              :postid="props.postid"
              @sendComment="sendComment"
              :isAvatar="false"
            ></CommentInput>
          </div>

          <div v-if="item.children && item.children.length">
            <CommentItemList
              @sendComment="sendComment"
              :pid="item.id"
              :postid="props.postid"
              @handleReply="handleReply(li)"
              :item="li"
              class="mt-1"
              v-for="(li, index) in item.children"
              :key="index"
            ></CommentItemList>
          </div>
        </div>
      </div>
    </div>
    <van-empty image="error" description="暂无评论" v-else />
  </div>
</template>

<script setup>
import moment from "moment";
import CommentInput from "./CommentInput.vue";
import CommentItemList from "./CommentItemList.vue";
import { nextTick, onMounted, ref } from "vue";

import { onClickOutside } from "@vueuse/core";
const commentInputRef = ref(null);
const setRef = (el) => {
  commentInputRef.value = el;
};
nextTick(() => {
  onClickOutside(commentInputRef, (event) => {
    emits("handleReply", {});
  });
});

const props = defineProps({
  commentList: {
    type: Array,
    default: () => [],
  },
  postid: {
    type: [Number, String],
    default: 0,
  },
});
const emits = defineEmits(["handleReply", "sendComment", "blurChange"]);
const sendComment = () => {
  emits("sendComment");
};
const handleReply1 = (item) => {
  handleReply(item);
  if (item.isShowInput) {
    nextTick(() => {
      console.log(" commentInputRef.value :>> ", commentInputRef);
      commentInputRef.value.focusDiv();
    });
  }
};
const handleReply = (li) => {
  emits("handleReply", li);
};
</script>

<style>
</style>